<template>
    <div >
        <el-row v-loading="loading"  element-loading-text="拼命解析中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255,255,255, 1)">
                    <div >
                    <el-col :span="24" class="content_left_top">
                        <el-row>
                            <el-col :span="24">
                                <el-row>
                                    <el-col :span="10" class="content_left_top_title_top">
                                        <div class="content_left_top_title1">{{dpxx.shop_name?dpxx.shop_name:'获取失败'}} </div>
                                        <!-- <div class="content_left_top_title2">2023/11/11 18:16:23</div> -->
                                    </el-col>
                                   
                                        <div style="padding: 10px;float: right;">
                                            <!-- <span class="ph_style" @click="get_to('https://compass.jinritemai.com/shop/merchandise-diagnosis?from_page=%2Fshop&btm_ppre=a2427.b76571.c4158.d20759_i3&btm_pre=a6187.b01487.c0.d0&btm_show_id=39df17af-08af-423f-b410-598105505dfd')">优化</span> -->
                                            <el-radio-group @change="change_lp" v-model="radio3" size="small">
                                                <el-radio-button label="0">实时</el-radio-button>
                                                <el-radio-button label="1">近一天</el-radio-button>
                                                <el-radio-button label="7">近七天</el-radio-button>
                                            </el-radio-group>
                                        </div>
                                        
                                  
                                </el-row>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">成交金额
                                    </div>
                                    <div class="content_left_content_box_content">{{shop.pay_amt.index_values.value.value?'￥'+(shop.pay_amt.index_values.value.value)/100:'-'}}</div>
                                    <div class="content_left_content_box_bottom">
                                        <span
                                            class="content_left_content_box_bottom2">{{shop.pay_amt.index_values.out_period_ratio.value?(shop.pay_amt.index_values.out_period_ratio.value>0?'↑':'↓'):''}}{{shop.pay_amt.index_values.out_period_ratio.value?Math.abs(((shop.pay_amt.index_values.out_period_ratio.value)*100).toFixed(2))+'%':'-'}}</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">成交订单数
                                    </div>
                                    <div class="content_left_content_box_content">{{shop.pay_order_cnt.index_values.value.value?shop.pay_order_cnt.index_values.value.value:'-'}}</div>
                                    <div class="content_left_content_box_bottom">
                                        <span
                                            class="content_left_content_box_bottom2">{{shop.pay_order_cnt.index_values.out_period_ratio.value?(shop.pay_order_cnt.index_values.out_period_ratio.value>0?'↑':'↓'):''}}{{shop.pay_order_cnt.index_values.out_period_ratio.value?Math.abs(((shop.pay_order_cnt.index_values.out_period_ratio.value)*100).toFixed(2))+'%':'-'}}</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">商品曝光人数
                                    </div>
                                    <div class="content_left_content_box_content">{{shop.product_show_ucnt.index_values.value.value?(shop.product_show_ucnt.index_values.value.value):'-'}}
                                    </div>
                                    <div class="content_left_content_box_bottom">
                                        <span
                                            class="content_left_content_box_bottom2">{{shop.product_show_ucnt.index_values.out_period_ratio.value?(shop.product_show_ucnt.index_values.out_period_ratio.value>0?'↑':'↓'):''}}{{shop.product_show_ucnt.index_values.out_period_ratio.value?Math.abs(((shop.product_show_ucnt.index_values.out_period_ratio.value)*100).toFixed(2))+'%':'-'}}</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">商品点击支付率
                                    </div>
                                    <div class="content_left_content_box_content">{{shop.product_click_pay_rate.index_values.value.value?((shop.product_click_pay_rate.index_values.value.value)*100).toFixed(2)+'%':'-'}}
                                    </div>
                                    <div class="content_left_content_box_bottom">
                                        <span
                                            class="content_left_content_box_bottom2">{{shop.product_click_pay_rate.index_values.out_period_ratio.value?(shop.product_click_pay_rate.index_values.out_period_ratio.value>0?'↑':'↓'):''}}{{shop.product_click_pay_rate.index_values.out_period_ratio.value?((Math.abs(shop.product_click_pay_rate.index_values.out_period_ratio.value)*100).toFixed(2))+'%':'-'}}</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">直播
                                    </div>
                                    <!-- <div class="content_left_content_box_content">{{shop.live_index.txt}}</div> -->
                                    <div class="content_left_content_box_bottom">
                                        <span class="content_left_content_box_bottom2">{{shop.live_index.txt}}</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">短视频
                                    </div>
                                    <!-- <div class="content_left_content_box_content">{{shop.video_index.txt}}</div> -->
                                    <div class="content_left_content_box_bottom">
                                        <span class="content_left_content_box_bottom2">{{shop.video_index.txt}}</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">商品卡
                                    </div>
                                    <div class="content_left_content_box_content">{{shop.prod_card_index.value}}
                                    </div>
                                    <div class="content_left_content_box_bottom">
                                        <span
                                            class="content_left_content_box_bottom2"> 较昨天{{shop.prod_card_index.out_period_ratio}}</span>
                                        
                                        
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title">图文
                                    </div>
                                    <!-- <div class="content_left_content_box_content">{{shop.artc_video_index.link_name}}</div> -->
                                    <div class="content_left_content_box_bottom">
                                        <span class="content_left_content_box_bottom2">{{shop.artc_video_index.txt}}</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="8" class="content_left_top_title">
                                <div class="content_left_content_box">
                                    <div class="content_left_content_box_title" style="font-size: .7375rem;padding:.3125rem 0;">昨日差评数{{shop.good_eval_cnt}}
                                    </div>
                                    <div class="content_left_content_box_title" style="font-size: .7375rem;padding:.3125rem 0;">昨日好评数{{shop.bad_eval_cnt}}
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <div class="map1" id="echarts" style="width:100%" ref="echarts"></div>
                            </el-col>
                        </el-row>
                    </el-col>
                    </div>
                </el-row>
                <el-row class="content_left_content"
                v-loading="loading1"  element-loading-text="拼命解析中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255,255,255, 1)">
                    <div @click="get_to('https://fxg.jinritemai.com/ffa/govern-guarantee/regulation/doji')">
                    <el-col :span="24">
                        <el-row>
                            <!-- <span class="ph_style" @click="get_to('https://compass.jinritemai.com/shop/merchandise-diagnosis?from_page=%2Fshop&btm_ppre=a2427.b76571.c4158.d20759_i3&btm_pre=a6187.b01487.c0.d0&btm_show_id=39df17af-08af-423f-b410-598105505dfd')">优化</span> -->
                            <el-row style="text-align: center;">
                                <el-col :span="12">
                                    <div>一般违规扣分{{wg[1].score}}分</div>
                                </el-col>
                                <el-col :span="12">
                                    <div>严重违规扣分{{wg[0].score}}分</div>
                                </el-col>
                            </el-row>
                            <el-row class="content_left_bottom" >
                                <div class="map3" style="width:100%" ref="echarts10">
                                </div>
                            </el-row>
                           
                            
                        </el-row>
                        
                    </el-col>
                </div>
                </el-row>
                <el-row class="content_left_bottom"
                v-loading="loading2"  element-loading-text="拼命解析中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255,255,255, 1)">
                    <div >
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="24">
                                <div class="content_left_bottom_left">
                                    售后工作台 <span class="ph_style" @click="get_to('https://fxg.jinritemai.com/ffa/maftersale/aftersale/list?btm_ppre=a0.b0.c0.d0&btm_pre=a0.b0.c0.d0')">优化</span>
                                </div>
                                
                            </el-col>
                        </el-row>
                        <el-row style="padding:20px;">
                            <el-col :span="10">
                                <div class="content_left_bottom_content">
                                    {{sh_data.arbitrate_unsettled.name}}->
                                    <span style="color: red;"> {{sh_data.arbitrate_unsettled.value}}</span>
                                </div>
                                <div class="content_left_bottom_content">
                                    {{sh_data.exchange_for_receive.name}}->
                                    <span style="color: red;"> {{sh_data.exchange_for_receive.value}}</span>
                                </div>
                                <div class="content_left_bottom_content">
                                    {{sh_data.refund_audit.name}}->
                                    <span style="color: red;"> {{sh_data.refund_audit.value}}</span>
                                </div>
                                <div class="content_left_bottom_content">
                                    {{sh_data.return_audit.name}}->
                                    <span style="color: red;"> {{sh_data.return_audit.value}}</span>
                                </div>
                                <div class="content_left_bottom_content">
                                    {{sh_data.return_for_receive.name}}->
                                    <span style="color: red;"> {{sh_data.return_for_receive.value}}</span>
                                </div>
                            </el-col>
                            <el-col :span="14">
                                <div class="map3" style="width:100%" id="echarts3" ref="echarts3"></div>
                            </el-col>
                        </el-row>
                    </el-col>
                    </div>
                </el-row>
                <div >
                <el-row class="content_left_bottom" v-loading="loading3"  element-loading-text="拼命解析中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255,255,255, 1)">
                    <div style="height:4.25rem;line-height:4.25rem" class="content_left_bottom_left">商品运营---猜你喜欢准入 <span class="ph_style" @click="get_to('https://compass.jinritemai.com/shop/mall-recommend?from_page=%2Fshop%2Fsearch%2Ftraffic-analysis&btm_ppre=a6187.b2906.c0.d0&btm_pre=a6187.b09827.c0.d0&btm_show_id=6531b4ce-008f-48ec-88fb-eb2936471d30')">优化</span></div>
                    <el-row style="text-align: center;
                    line-height: 2.8rem;margin-top:.4rem;">
                        <el-col :span="8" v-for="item in spyylist">
                            <div class="content_left_bottom_left_title">{{item.threshold_name}}</div>
                            <div class="content_left_bottom_left_content">{{item.current_performance}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="content_left_bottom_title">
                        <el-col :span="12">
                            <div class="grid-content bg-purple">有动销待优化商品{{spyy.have_sell_count}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple-light">无动销待优化商品{{spyy.zero_sell_count}}</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="map2" style="width:100%" id="echarts8" ref="echarts8"></div>
                        </el-col>
                    </el-row>
                </el-row>
                </div>
           
           
        
    </div>
</template>
<script>
    import axios from 'axios'
   
    export default {
        components: {
           
        },
        data() {
            return {
                radio3:0,
                dpxx:{},
                loading:true,
                loading1:true,
                loading2:true,
                loading3:true,
                echarts:'',
              
                wg: [
                    { score: '' },
                    { score: '' },
                ],
                spyy: {},
                spyylist: {},
                shop: {
                    artc_video_index: {},
                    bad_eval_cnt:'',
                    chart: {},
                    good_eval_cnt: '',
                    live_index: {},
                    pay_amt: {
                        index_values:{
                                out_period_ratio:{
                                    value:''
                                },
                                value:{
                                    value:''
                                }
                            }
                    },
                    pay_order_cnt: {
                        index_values:{
                                out_period_ratio:{
                                    value:''
                                },
                                value:{
                                    value:''
                                }
                            }
                    },
                    prod_card_index: {
                        
                    },
                    product_click_pay_rate: {
                        index_values:{
                                out_period_ratio:{
                                    value:''
                                },
                                value:{
                                    value:''
                                }
                            }
                    },
                    product_show_ucnt: {
                      
                            index_values:{
                                out_period_ratio:{
                                    value:''
                                },
                                value:{
                                    value:''
                                }
                            }
                        
                    },
                    video_index: {},

                },
                title: [
                    {
                        name: '首页'
                    },
                    {
                        name: '一键诊断'
                    },
                    {
                        name: '报表下载'
                    },
                    {
                        name: '插件下载'
                    },
                    {
                        name: '抖店服务市场'
                    },
                ],
                chart: null,
                option: {},
                sh_data: {
                    arbitrate_unsettled: {
                        name: 'qq',
                        value: 'ss'
                    },
                    exchange_for_receive: {
                        name: 'qq',
                        value: 'ss'
                    },
                    refund_audit: {
                        name: 'qq',
                        value: 'ss'
                    },
                    return_audit: {
                        name: 'qq',
                        value: 'ss'
                    },
                    return_for_receive: {
                        name: 'qq',
                        value: 'ss'
                    },
                }


            };
        },
        created: function () {

            var that = this
             //新人已出
             axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/health_center?shop_id=' + this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.wg = response.data.data.violation_scores
                   
                    console.log('新人已出', that.wg)
                    }
                    that.loading1=false

                })
                .catch(function (error) {
                    console.log(error)
                })
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shop_info?shop_id=' + this.$store.state.shop_id
            })
                .then(function (response) {
                  
                  if(response.data.code==0){
                    console.log('店铺信息',response.data.data.data)
                    that.dpxx=response.data.data.data
                  that.$store.dpxx=response.data.data.data
                  }
                  
                })
                .catch(function (error) {
                    console.log(error)
                })
            // 经营
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpin_yunying1?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    console.log('运营',response.data.data,response.data.code)
                   
                    if(response.data.data &&  response.data.data.pay_amt){
                       
                        that.shop = response.data.data
                        
                    }
                    that.loading=false
                 
                })
                .catch(function (error) {
                    console.log(error)
                })
          
            //售后工作台
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shouhou_gongzuotai?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.sh_data = response.data.data
                    
                    }
                    that.loading2=false
                })
                .catch(function (error) {
                    console.log(error)
                })
            //商品运营
            axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpin_yunying?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.code==0){
                        that.spyy = response.data.data
                    console.log('商品运营',that.spyy)
                    that.spyylist = response.data.data.threshold
                    }
                    
                    that.loading3=false
                })
                .catch(function (error) {
                    console.log(error)
                })

           
        },
        mounted: function () {
            setTimeout(this.EchartsInit(), 2000)

        },
        methods: {
            data_init(){
                var echarts10 = this.$echarts.init(this.$refs.echarts10)
                var that=this
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpin_yunying1?shop_id='+this.$store.state.shop_id+'&day='+that.radio3
            })
                .then(function (response) {
                    console.log('运营',response.data.data,response.data.code)
                   
                    if(response.data.data &&  response.data.data.pay_amt){
                       
                        that.shop = response.data.data
                        
                    }
                  
           
                        // console.log('新人已出', response.data.data)
                        if(response.data.code==0){

                        
                        const dataBJ = [
                            [],
                        ];
                        for (var i = 0; i < response.data.data.list.length; i++) {
                            dataBJ[0].push(response.data.data.list[i].score)
                        }
                        const lineStyle = {
                            width: 1.2,
                            opacity: 0.5
                        };

                        echarts10.setOption({
                            backgroundColor: '#fff',

                            title: {
                                text: '已出新人期',
                                left: 'left',
                                textStyle: {
                                    color: '#000'
                                }
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            grid: {
                                containLabel: true
                            },
                            legend: {
                                // bottom: 5,
                                // top: 5,
                                left:5,
                                right:5,
                                data: ['童伟'],
                                itemGap: 20,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 10
                                },
                                selectedMode: 'single'
                            },
                            radar: {
                                indicator: [
                                    { name: '新人学习', max: 200 },
                                    { name: '经营合规', max: 200 },
                                    { name: '综合体验', max: 200 },
                                    { name: '运营能力', max: 200 },

                                ],
                                radius: '70%',
                                shape: 'circle',
                                splitNumber: 5,
                                axisName: {
                                    color: 'rgb(238, 197, 102)'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: [
                                            'rgba(238, 197, 102, 0.1)',
                                            'rgba(238, 197, 102, 0.2)',
                                            'rgba(238, 197, 102, 0.4)',
                                            'rgba(238, 197, 102, 0.6)',
                                            'rgba(238, 197, 102, 0.8)',
                                            'rgba(238, 197, 102, 1)'
                                        ].reverse()
                                    }
                                },
                                splitArea: {
                                    show: true
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(238, 197, 102, 0.5)'
                                    }
                                }
                            },

                            series: [
                                {
                                    name: '已出新手期',
                                    type: 'radar',
                                    lineStyle: lineStyle,
                                    data: dataBJ,
                                    symbol: 'none',
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 30
                                    },
                                    itemStyle: {
                                        color: '#F9713C'
                                    },
                                    areaStyle: {
                                        opacity: 0.7
                                    }
                                },

                            ]
                        });
                    }

                 

                echarts10.resize()
                    that.loading=false
                 
                })
                .catch(function (error) {
                    console.log(error)
                })
          
            },
            change_lp(e){
                this.radio3=e
                this.data_init()
            },
            get_to(url){
                window.open(url, '_blank')
            },
            getInfo(){
                var that = this
                var echarts10 = this.$echarts.init(this.$refs.echarts10)
                echarts10.resize()
               var echarts = this.$echarts.init(this.$refs.echarts) 
                 echarts.resize()
                
                var echarts8 = this.$echarts.init(this.$refs.echarts8)
                echarts8.resize()
                var echarts3 = this.$echarts.init(this.$refs.echarts3)
                echarts3.resize()
                this.$nextTick(() => {
                    echarts.resize();
                    
                    echarts3.resize();
                    echarts8.resize();
                    echarts10.resize();
                })
                window.addEventListener("resize", () => {
                    echarts.resize();
                  
                    echarts3.resize();
                    echarts8.resize();
                    echarts10.resize();
                });
            },
            EchartsInit() {
                var that = this
                var echarts10 = this.$echarts.init(this.$refs.echarts10)
                axios({
                    method: 'get',
                    url: 'http://doudian-api.fd1.cc/api/health_center?shop_id=' + this.$store.state.shop_id
                })
                    .then(function (response) {
                        // console.log('新人已出', response.data.data)
                        if(response.data.code==0){

                        
                        const dataBJ = [
                            [],
                        ];
                        for (var i = 0; i < response.data.data.list.length; i++) {
                            dataBJ[0].push(response.data.data.list[i].score)
                        }
                        const lineStyle = {
                            width: 1.2,
                            opacity: 0.5
                        };

                        echarts10.setOption({
                            backgroundColor: '#fff',

                            title: {
                                text: '已出新人期',
                                left: 'left',
                                textStyle: {
                                    color: '#000'
                                }
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            grid: {
                                containLabel: true
                            },
                            legend: {
                                // bottom: 5,
                                // top: 5,
                                left:5,
                                right:5,
                                data: ['童伟'],
                                itemGap: 20,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 10
                                },
                                selectedMode: 'single'
                            },
                            radar: {
                                indicator: [
                                    { name: '新人学习', max: 200 },
                                    { name: '经营合规', max: 200 },
                                    { name: '综合体验', max: 200 },
                                    { name: '运营能力', max: 200 },

                                ],
                                radius: '70%',
                                shape: 'circle',
                                splitNumber: 5,
                                axisName: {
                                    color: 'rgb(238, 197, 102)'
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: [
                                            'rgba(238, 197, 102, 0.1)',
                                            'rgba(238, 197, 102, 0.2)',
                                            'rgba(238, 197, 102, 0.4)',
                                            'rgba(238, 197, 102, 0.6)',
                                            'rgba(238, 197, 102, 0.8)',
                                            'rgba(238, 197, 102, 1)'
                                        ].reverse()
                                    }
                                },
                                splitArea: {
                                    show: true
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(238, 197, 102, 0.5)'
                                    }
                                }
                            },

                            series: [
                                {
                                    name: '已出新手期',
                                    type: 'radar',
                                    lineStyle: lineStyle,
                                    data: dataBJ,
                                    symbol: 'none',
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 30
                                    },
                                    itemStyle: {
                                        color: '#F9713C'
                                    },
                                    areaStyle: {
                                        opacity: 0.7
                                    }
                                },

                            ]
                        });
                    }

                    })
                    .catch(function (error) {
                        console.log(error)
                    })

                echarts10.resize()
               var echarts = this.$echarts.init(this.$refs.echarts)
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/shangpin_yunying1?shop_id='+this.$store.state.shop_id
            })
                .then(function (response) {
                    if(response.data.data &&  response.data.data.pay_amt){
                        var  shop = response.data.data
                    var x=[]
                    var y=[]
                    var y1=[]
                    for(var i=0;i<shop.chart.index.length;i++){
                        x.push(shop.chart.index[i].x_str)
                        y.push(shop.chart.index[i].y/100)
                    }
                    for(var i=0;i<shop.chart.last_index.length;i++){
                       
                        y1.push(shop.chart.last_index[i].y/100)
                    }
               
                    that.$echarts.init(that.$refs.echarts, null, {
                    width: 400,
                    height: 200
                }).setOption({
                    xAxis: {
                        data: x
                    },
                    tooltip: {
                        trigger: 'axis',

                    },
                    grid:{
                        top:30,
                                left:'15%',
                            //    containLabel:true,
                           },
                    yAxis: {
                        
                    },
                    series: [
                        {
                            name:'昨日成交金额',
                            data:y,
                            type: 'line',
                           
                            showSymbol: false,
                                    clip: false,
                                    smooth: true,
                           
                        },
                        {
                            name:'前日成交金额',
                            data: y1,
                            type: 'line',
                            stack: 'x',
                            showSymbol: false,
                                    clip: false,
                                    smooth: true,
                           
                        }
                    ]
                });
                    }
                 
                })
                .catch(function (error) {
                    console.log(error)
                })
               
                 echarts.resize()

                
                var echarts8 = this.$echarts.init(this.$refs.echarts8)
                axios({
                    method: 'get',
                    url: 'http://doudian-api.fd1.cc/api/shangpin_yunying?shop_id='+this.$store.state.shop_id
                })
                    .then(function (response) {
                        if(response.data.code==0){
                            var spyy = response.data.data

that.$echarts.init(that.$refs.echarts8, null, {
width: 400,
height: 200
}).setOption({
    grid: {
        width: '100%' //设置宽度为父容器宽度的90%
    },
    tooltip: {
trigger: 'item'
},
    series: [
        {
            type: 'pie',
            data: [
                {
                    value: spyy.have_sell_count,
                    name: '无动销待'
                },
                {
                    value: spyy.zero_sell_count,
                    name: '有动销待'
                }
            ],
            // roseType: 'area'
        }
    ]

});

                        }
                      
                    })
                    .catch(function (error) {
                        console.log(error)
                    })

                echarts8.resize()
                var echarts3 = this.$echarts.init(this.$refs.echarts3)
                axios({
                    method: 'get',
                    url: 'http://doudian-api.fd1.cc/api/shouhou_gongzuotai?shop_id='+this.$store.state.shop_id
                })
                    .then(function (response) {
                        if(response.data.code==0){
                            var sh_data = response.data.data
                        that.$echarts.init(that.$refs.echarts3,null, {
                    width: 400,
                    height: 200
                }).setOption({
                    tooltip: {
                                trigger: 'axis',

                            },
                            grid: {
                                left:'12%',
                                width: '95%' //设置宽度为父容器宽度的90%
                            },
                            
                            xAxis: {
                                type: 'category',
                                axisLabel: { interval: 0, rotate: 70, fontSize: 10 },
                                data: [sh_data.arbitrate_unsettled.name, sh_data.exchange_for_receive.name, sh_data.refund_audit.name, sh_data.return_audit.name, sh_data.return_for_receive.name]
                                // data: [342423,432423,23432,234,432423]
                            },
                            yAxis: {},
                            series: [
                                {
                                    type: 'bar',
                                    data: [
                                        sh_data.arbitrate_unsettled.value,
                                        {
                                            value: sh_data.exchange_for_receive.value,
                                            // 设置单个柱子的样式
                                            itemStyle: {
                                                color: '#ff4114',
                                                shadowColor: '#91cc75',
                                                borderType: 'dashed',

                                            }
                                        },
                                        {
                                            value: sh_data.refund_audit.value,
                                            // 设置单个柱子的样式
                                            itemStyle: {
                                                color: '#eba521',
                                                shadowColor: '#91cc75',
                                                borderType: 'dashed',

                                            }
                                        },
                                        {
                                            value: sh_data.return_audit.value,
                                            // 设置单个柱子的样式
                                            itemStyle: {
                                                color: '#91cc75',
                                                shadowColor: '#91cc75',
                                                borderType: 'dashed',

                                            }
                                        },
                                        {
                                            value: sh_data.return_for_receive.value,
                                            // 设置单个柱子的样式
                                            itemStyle: {
                                                color: 'gold',
                                                shadowColor: '#91cc75',
                                                borderType: 'dashed',

                                            }
                                        },
                                    ],

                                }
                            ]

                        });
                        }
                     
                    })
                    .catch(function (error) {
                        console.log(error)
                    })

                echarts3.resize()
                this.$nextTick(() => {
                    echarts.resize();
                    echarts10.resize();
                    echarts3.resize();
                    echarts8.resize();

                })
                window.addEventListener("resize", () => {
                    echarts10.resize();
                    echarts.resize();
                    // echarts2.resize();
                    echarts3.resize();
                    echarts8.resize();

                });

            },
        }
    }
</script>
<style lang="less">
    .content_left_top:hover{
       
        border: 1px solid rgb(93, 137, 246);
    }
    .content_left_content:hover{
       
       border: 1px solid rgb(93, 137, 246);
   }
   .content_left_bottom:hover{
    border: 1px solid rgb(93, 137, 246);
   }

    .content_left_content_box_title{
        align-items: center;
    color: #565960;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    }
    .content_left_top_title_top {
        padding: 0.625rem 0.625rem 0 1rem;
        white-space: nowrap; /* 不换行 */
   overflow: hidden;    /* 超出部分隐藏 */
   text-overflow: ellipsis; /* 显示省略号 */

        .content_left_top_title2 {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: .625rem;
            color: rgb(61, 52, 219);


        }

        .content_left_top_title1 {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bold;
            margin-bottom: .1875rem;
            /* color: transparent; */
            /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
            -webkit-background-clip: text;
            background-clip: text;

        }

    }

    .content_left_top {

        width: 100%;
        border-radius: 0.4rem;
        background-color: rgba(254, 255, 255, 0.9);

        .content_left_top_title3 {
            font-family: 'Times New Roman', Times, serif;
            color: #03a9f4;
            font-size: .8125rem;
            padding: 0.3125rem;
        }

        .content_left_top_title {
            padding: 0 0.625rem 0 0.625rem;
            font-weight: bold;



            .content_left_content_box {
                line-height: 1.5625rem;
                font-size: 0.7375rem;
                padding: 0.3125rem;
                /* color: #8a9cbf; */

                padding: .3125rem;

                border-radius: .25rem;
                word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
                .content_left_content_box_content {
                    color: #252931;
    display: flex;
    font-family: Barlow;
    font-size: 18px;
    font-weight: 600;
                }

                .content_left_content_box_bottom1 {
                    font-size: .8125rem;
                }

                .content_left_content_box_bottom2 {
                    color: #379ae1;
                }
            }
        }
    }
  
    .content_left_content {
        line-height: 2.25rem;
        margin-top: 1rem;
        width: 100%;
        border-radius: 0.4rem;
        background-color: rgba(254, 255, 255, 0.9);
        padding: 1.625rem;
      
        .content_left_content_content {
            font-size: 1.25rem;
            text-align: center;
            font-weight: bold;
            color: #379ae1;
            margin-right: .625rem;
            margin-bottom: 10px;
            margin-top: 1.25rem;
            
        }

       

        .content_left_content_left {

            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bold;
            margin-left: .375rem;
            margin-bottom: 0.1875rem;
            /* color: transparent; */
            /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
            -webkit-background-clip: text;
        }
    }

    .content_left_bottom {
        margin-top: 1rem;
        width: 100%;
        border-radius: 0.4rem;
        background-color: rgba(254, 255, 255, 0.9);
        padding: .625rem;

        .content_left_bottom_content {
            font-size: 10px;
            color: #03a9f4;
            margin-right: 1.25rem;
            margin-bottom: 20px;
            margin-top: 1.25rem;
            background: ;

        }

        .content_left_bottom_right {
            font-size: 10px;
            color: #3d34db;
            margin-right: .625rem;
            margin-bottom: 10px;
        }

        .content_left_bottom_left {

            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-weight: bold;
            margin-left: .375rem;
            margin-bottom: 0.1875rem;
            /* color: transparent; */
            /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
            -webkit-background-clip: text;
        }
    }


    .container {
        width: 300px;
        height: 300px;
        margin-left: 30px;
    }

    .map1 {
        width: 100%;
        height: 16.5rem;
        background-color: ;
        border-radius: .625rem;
    }

    .content_left_bottom_left_title {
        font-size: .7375rem;
        color: rgb(149, 150, 151);
    }

    .content_left_bottom_left_content {
        font-size: .8625rem;
    }

    .content_left_bottom {
        background-color: #fff;

        .content_left_bottom_title {
            margin: 2rem 8%;
            text-align: center;

            .bg-purple {
                color: #379ae1
            }
        }
    }

    .map2 {
        width: 100%;
        height: 15.5rem;
        background-color: ;
        border-radius: .625rem;
    }

    .map3 {
        width: 100%;
        height: 15.5rem;
        background-color: ;
        border-radius: .625rem;
    }

    canvas {
        width: 100%;
    }
    
    .content_left_bottom_content {
        font-size: 12px;

        margin-right: 0.625rem;
        margin-bottom: 10px;
        margin-top: 1.25rem
    }
</style>